<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <box style="color: red"></box>
    </div>
</body>
<script>
    const app = Vue.createApp({
        setup (props, context) {
            return {
            }
        },
    })

    app.component('box', {
        template: `
        <div> 想卖掉房子去环游世界，可是房东死活都不同意。 </div>
        <h1 :='$attrs'> 你好我的朋友 </h1>
            `,
        setup (props, context) {
            // context.attrs 可以获取到属性透传的内容
            console.log(context.attrs.style);
            context.attrs.style.border = '1px solid red'
        }
    })

    app.mount('#app')
</script>

</html>